<template>
    <div class="big-template">
    <div class="Template" v-for="(v,k) in template" :key="v.id">
        <van-grid :border="false" :column-num="1" >
          <van-grid-item>
          <van-image :src="v.scene_pic_url" />
        </van-grid-item>
         <van-grid-item>
             <p class="tem_title">{{v.title}}</p>
             <p class="tem_content" >{{v.subtitle}}</p>
             <p class="tem_price">￥ {{v.price_info}} 元起</p>
        </van-grid-item>
        </van-grid>
    </div>
     <van-pagination 
         v-model="currentPage" 
         :page-count="2" 
         :show-page-size="0" 
         @change="changePage"
       />
    </div>
</template>

<script>
import {GetTemplate} from "@/request/api"

export default {
   data(){
       return{
          template:'',
          pagesize:'',
          currentPage:1
       }
   },
   methods:{
       changePage(){
            GetTemplate({page:this.currentPage}).then(res=>{
            //    console.log(res);
               this.template=res.data.data;
           
           })
       }
   },
   created(){
       GetTemplate({page:this.currentPage,size:this.pagesize}).then(res=>{
        //    console.log(res);
           this.template=res.data.data;
           this.currentPage=res.data.currentPage
       })
   },
   
}
</script>

<style lang="less">
.big-template{
    width: 100%;
    margin-bottom: 100px;
}
.Template{
    margin-bottom: 20px;
}
.Template .van-image img{
    width:100%;
}
.Template p{
    padding-bottom:20px
}
.Template .tem_title{
    font-size:18px;
    color: #333;
}
/deep/ .Template .tem_content{
     font-size: 0.16rem;
     color: #333;
     width: 100%;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-align: center;
}
.Template .tem_price{
    font-size:14px;
    color: #8B004A;
   
}
</style>